<template>
  <div class="book-detail">
    <Author :bookDetail="bookDetail"></Author>
    <Comment :commentArr="commentArr"></Comment>
    <ContentSummary :bookDetail="bookDetail"></ContentSummary>
    <Book :bookDetail="bookDetail"></Book>
    <PostComment :likeInfo="likeInfo" :bookDetail="bookDetail" :commentArr="commentArr"></PostComment>
  </div>
</template>

<script>
import request from '../../utils/request'
import Search from '../../components/search/index'
import Author from './components/author'
import Comment from './components/comment'
import ContentSummary from './components/content' // Content是关键字/保留字，用了渲染不出动态数据
import Book from './components/book'
import PostComment from './components/postComment'
export default {
  data() {
    return {
      bookDetail: {},
      commentArr: [],
      likeInfo: {}
    }
  },
  components: { Search, Author, Comment, ContentSummary, Book, PostComment },
  async onLoad(option) {
    wx.showLoading({
      title: '加载中',
    })
    const { bookId } = option
    const getBookDetail = this.getBookDetail(bookId)
    const getComment = this.getComment(bookId)
    const getLike = this.getLike(bookId)
    // all或者race里面是Promise对象
    const result = await Promise.all([getBookDetail, getComment, getLike])
    // result是返回的结果组成的数组
    this.bookDetail = result[0]
    this.commentArr = result[1].comments
    this.likeInfo = result[2]
    wx.hideLoading()

  },
  methods: {
    getBookDetail(id) {
      // 获取书籍详细信息
      return request({
        url: `book/${id}/detail`
      })
    },
    getComment(id) {
      // 获取书籍短评
      return request({
        url: `book/${id}/short_comment`
      })
    },
    getLike(id) {
      // 获取书籍点赞情况
      return request({
        url: `book/${id}/favor`
      })
    }
  },
  // 分享操作,必须写在页面中，不能写在组件中，并且必须要和页面的生命周期在同一级，否则会报错
  onShareAppMessage(e) {
    // console.log(e);
  }
};
</script>

<style scoped>
.book-detail {
  background-color: #eee;
}
</style>